import ProCard from '@ant-design/pro-card';
import YuqingList from '../../../components/YuqingList';
// import { ActionType } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-table';
import { Input, Tabs, message, Space, Button, Popconfirm } from 'antd';
import TabPane from '@ant-design/pro-card/lib/components/TabPane';
import { useState, useRef, useEffect } from 'react';
import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons';
import Charts from './Charts';
import { KeepAlive } from 'umi'
import style from './index.less';


const { Search } = Input;
const urls = [
  {
    name: '虎年行情即将打响 大数据透视来了 两大板块有望虎虎生威',
    url: 'https://guba.eastmoney.com/news.cjpl.1138991239.html',
    id: 0,
  },
  {
    name: '对前海的尊重就是对自己的尊重',
    url: 'https://guba.eastmoney.com/news.002432.1143644536.html',
    id: 1,
  },
];

const DataIntegration = () => {
  const [search, setSearch] = useState();
  const [value, setValue] = useState()
  const [dataSource, setDataSource] = useState(urls);

  const onSearch = (value) => {
    if (value) {
      setSearch(value);
      console.log('我输入了', value)
    } else {
      message.error('搜索内容不能为空');
    }
  };

  const onChange = (e) => {
    setValue(e.target.value)
    console.log('我输入了', value);
  }

  useEffect(() => {
    if (localStorage.getItem('forms')) {
      const data = localStorage
        .getItem('forms')
        .split(',')
        .map((e, id) => {
          const [name, url] = e.split('@');
          return { name, url, id };
        });
      setDataSource(data);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem(
      'forms',
      dataSource.map((e) => `${e.name?.replaceAll(',', '')}@${e.url?.replaceAll(',', '.')}`),
    );
  }, [dataSource]);
  // const actionRef = useRef < ActionType > ();
  // const pagination = {
  //   defaultPageSize: 4,
  //   hideOnSinglePage: true,
  //   defaultCurrent: 1
  // }


  return (
    <ProCard ghost direction="column" style={{ height: "100vh" }} >
      {/* 顶部搜索框 */}
      <ProCard
        title={<b style={{ fontSize: '18px' }}>舆情数据检索</b>}
        layout="center"
        style={{ borderRadius: '8px', marginBottom: '1em', marginTop: '-1em' }}
      >
        <Search
          enterButton="检索舆情"
          onSearch={onSearch}
          allowClear
          style={{ width: '30%', marginBottom: '2.5em' }}
          onChange={onChange}
          value={value}
        ></Search>
      </ProCard>


      <ProCard ghost gutter={16}>
        {search ? (
          <ProCard
            bodyStyle={{ padding: 0 }}
            colSpan={12}
            style={{ borderRadius: '8px', height: '85vh' }}
            extra={
              <Button onClick={() => setSearch('')} type="primary">
                返回
              </Button>
            }
          >
            <KeepAlive>
              <YuqingList word={search} />
            </KeepAlive>
          </ProCard>
        ) : (
          <ProCard
            colSpan={12}
            style={{ borderRadius: '8px', height: '85vh', overflow: 'hidden' }}
            title={search && <b style={{ fontSize: '18px' }}>检索结果</b>}
          >
            <KeepAlive>
              <Tabs
                centered="true"
                tabBarExtraContent={{ left: <b style={{ fontSize: '18px' }}>实时数据汇聚</b> }}
              >
                <TabPane tab="破产" key="1">
                  <YuqingList word="破产"></YuqingList>
                </TabPane>
                <TabPane tab="熔断" key="2">
                  <YuqingList word="熔断"></YuqingList>
                </TabPane>
                <TabPane tab="暴跌" key="3">
                  <YuqingList word="暴跌"></YuqingList>
                </TabPane>
                <TabPane tab="意外" key="4">
                  <YuqingList word="死亡"></YuqingList>
                </TabPane>
                <TabPane tab="风险" key="5">
                  <YuqingList word="风险"></YuqingList>
                </TabPane>
                <TabPane tab="死亡" key="6">
                  <YuqingList word="死亡"></YuqingList>
                </TabPane>
              </Tabs>
            </KeepAlive>
          </ProCard>
        )}

        <ProCard ghost gutter={8} colSpan={12} direction="column" style={{ height: '85vh' }}>
          <Charts></Charts>
          {/* 舆情数据获取 */}
          <ProCard
            title={<b>舆情数据获取</b>}
            style={{ borderRadius: '8px', height: "44.6vh", marginLeft: "-0.2em" }}
          >

            <ProCard style={{ height: "35vh", overflow: "auto" }} bodyStyle={{ padding: 0, margin: 0 }}>
              <EditableProTable
                request={async () => ({
                  data: dataSource,
                  success: true,
                })}
                columnEmptyText={false}
                // pagination={pagination}
                value={dataSource}
                onChange={setDataSource}
                columns={[
                  // {
                  //   dataIndex: 'name',
                  //   title: '文章名',
                  //   width: "50%",
                  //   textWrap: 'word-break',
                  //   ellipsis: true,

                  // },
                  {
                    dataIndex: 'url',
                    title: '文章地址',
                    width: "70%",
                    textWrap: 'word-break',
                    ellipsis: true,
                  },
                  {
                    title: '操作',
                    valueType: 'option',
                    width: "30%",
                    render: (text, record, _, action) => [
                      <a
                        key="editable"
                        onClick={() => {
                          action?.startEditable?.(record.id);
                        }}
                      >
                        编辑
                      </a>,
                      <Popconfirm title="你确定要删除这行数据吗？" icon={
                        <QuestionCircleOutlined
                          style={{
                            color: 'red',
                          }}
                        />
                      } onConfirm={() => setDataSource(dataSource.filter((item) => item.id !== record.id))}
                        okText="是" cancelText="否">
                        <a> 删除</a>

                      </Popconfirm>
                    ],
                  },
                ]}
              ></EditableProTable>
            </ProCard>

          </ProCard>
        </ProCard>

      </ProCard>


    </ProCard >
  );
};

export default DataIntegration;